<template>
  <el-row :gutter="gutter">
    <el-col :span="item.span" v-for="(item, index) in rows" :key="index">
      <form-render
        :options="item"
        v-model:data="localData"
        :pageId="$attrs.pageId"
        :inGrid="true"
        ref="grid_form"
      />
    </el-col>
  </el-row>
</template>

<script>
import FormRender from '../../views/form-render/index.vue';

export default {
  name: 'Grid',
  components: { FormRender },
  props: {
    rows: {
      type: Array,
      default: () => []
    },
    formData: {
      type: Object,
      default: () => {}
    },
    gutter: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      localData: {}
    };
  },
  watch: {
    formData: {
      handler(v) {
        this.localData = v;
      },
      immediate: true,
      deep: true
    },
    localData: {
      handler(v) {
        this.$emit('update:formData', v);
      },
      deep: true
    }
  },
  methods: {
    validate() {
      if (this.$refs.grid_form && this.$refs.grid_form.length) {
        // console.log('grisform', this.$refs.grid_form)
        const promises = [];
        const len = this.$refs.grid_form.length;
        for (let i = len - 1; i >= 0; i--) {
          promises.push(this.$refs.grid_form[i].validateAvueForm());
        }
        return promises;
      } else {
        return [];
      }
    },
    async resetForm() {
      if (this.$refs.grid_form && this.$refs.grid_form.length) {
        const len = this.$refs.grid_form.length;

        for (let i = len - 1; i >= 0; i--) {
          // 此处必须封装异步操作保证resetForm方法按顺序调用，因为方法内部使用了nexttick微任务
          await new Promise((resolve) => {
            this.$refs.grid_form[i].resetForm();
            resolve();
          });
        }
      }
    }
  }
};
</script>
